<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="static/element-plus/index1.css">
     <link rel="stylesheet"  href="index.css">
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>vue.js表单页面实现</h1>
    <el-form :model="formData">
        <el-form-item label="用户名:">
            <el-input v-model="formData.name"></el-input>
        </el-form-item>
        
        <label for="name">密码:</label>
        <input type="text" v-model="formData.password"></input>
        <br>
       <label>性别:</label>
       <input type="radio" v-model="formData.gender" value="男" checked>
       <label for="male">男</label>
       <input type="radio" v-model="formData.name" value="女"></input>
       <label for="female">女</label>
<br>
       <label for="hobby">兴趣爱好:</label>
       <input type="checkbox" v-model="formData.hobby" value="阅读">
       <label for="hobby">阅读</label>
       <input type="checkbox" v-model="formData.hobby" value="运动">
       <label for="hobby">运动:</label>
       <input type="checkbox" v-model="formData.hobby" value="旅行">
       <label for="hobby">旅行:</label>
       <input type="checkbox" v-model="formData.hobby" value="数码">
       <label for="hobby">数码</label>
 <br>
       <label for="job">职业:</label>
       <select v-model="formDate.job">
           <option value="前端开发工程师">前端开发工程师</option>
           <option value="后端开发工程师">后端开发工程师</option>
           <option value="产品设计师">产品设计师</option>
           <option value="运维工程师">运维工程师</option>
        </select>
<br>
           <label for="intro">自我介绍</label>
           <textarea v-model=""formData.intro></textarea>
           <br>
           <input type="submit" value="提交">
       
    </form>
         <div>
            <h3>请确认注册信息</h3>
            <p>用户名:{{formData.name}}</p>
            <p>性别:{{formData.gender}}</p>
            <p>兴趣爱好:{{formData.hobby.toString(',')}}</p>
            <p>职业:{{formData.job}}</p>
            <p>自我介绍:{{formData.intro}}</p>
         </div>   



    </div>
</body>
  <script>
       const App={
        data(){
         return{
             formData:{
                name:"",
                password:'',
                gender:'',
                hobby:[],
                job:'',
                intro:''
             }
         }
        },
        methods:{

        }
       }
       Vue.createApp(App).mount("#app")
  </script>
</html>